<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JD头部效果</title>
		<style type="text/css">
			*{margin:0;padding:0;font-size:12px;}
			ul,li,dl,dt,dd{list-style: none;}
			a{text-decoration: none;color:#333;}
			
			#header{width:100%;height:auto;background:#eee;}
			#head{width:1210px;overflow:hidden;margin:0 auto;}
			#h_left{width:320px;float:left;}
			#h_left p{width:60px;padding:10px 6px;}
			#h_left p:hover{background:white;border:1px solid #ccc;border-bottom: 0;}
			.province{display:none;background:white;width:308px;padding:6px;border:1px solid #ccc;border-top: 0;}
			.province a{display: inline-block;width:36px;height:18px;
			        padding-left:8px;line-height:18px;margin:6px 8px;}
			.province a:hover{color:red;background:#ccc;}
			.chosecity{color:white;background:red;}
			#h_right{width:810px;float:right;overflow: hidden;}
			#dl{width:80px;float:left;padding:10px 0;}
			#dl a:hover{color:red;}
			#menu{width:730px;float:right;overflow: hidden;}
			#nav li{float:left;padding:0 14px;margin:10px 1px;border-right:1px solid #ccc;}
			.list{color:red;}
			
			.public{display:none;position: absolute;top:36px;background:white;border:1px solid #ccc;padding:10px;}
			.myjd{width:230px;}
			.myjd dl{padding:20px 0 10px 100px;}
			.myjd dl dt a{font-weight:bold;}
			.myjd dl dt a:hover{color:red;}
			.myjd dl dd{padding:10px 0;}
			.myjd dl dd a{padding-right:10px;}
			.myjd a:hover{color:red;}
			.myjd dl dd .line{padding:0 10px;border-left:1px solid #ccc;}
			#nav .myjd ul li{width:90px;padding-left:10px;float:left;border:0;}
			
			.phonejd{width:200px;}
			.phonejd dl{padding:0px 0 70px 70px;border-bottom: 1px dashed #ccc;}
			.phonejd .ts{padding:10px 0 70px 70px;border:0;}
			.phonejd dd{color: red;}
			
			.noticejd{width:90px;}
			.noticejd dt{padding-left:15px;}
			.noticejd dt img{width:60px;height:60px;}
			.noticejd dd{padding-left:10px;}
			
			.clientse{width:130px;padding:0;}
			.clientse dl{overflow: hidden;width:120px;padding:10px 0 10px 10px;border-bottom: 1px dashed #ccc;}
			.clientse dt{width:100px;font-weight:bold;}
			.clientse dd{width:50px;margin:4px 2px;float:left;}
			.clientse .ts2{width:60px;}
			.clientse dd a:hover{color:red;}
			
			.netnav{width:1180px;left:100px;overflow: hidden;}
			.netnav dl{width:250px;float:left;overflow: hidden;padding:10px;border-right:1px solid #ccc;}
			.netnav .ts3{width:320px;}
			.netnav .ts4{width:270px;border:0;}
			.netnav dl dt{font-size:14px;font-weight:bold;padding:0 0 0 10px;}
			.netnav dl dd{width:60px;margin:4px 10px;float:left;}
			.netnav .ts4 .ts5{width:100px;}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#nav").children("li").on("mouseover","mouseout",function(){
				$(this).children("div").toggle();
				
			})
		})
			
		
		</script>
	</head>
	<body>
		<div id="header">
			<div id="head">
				
				<div id="h_left">
					<p>送至: <span>北京</span></p>
					<div class="province">
						<a class="chosecity" href="#">北京</a><a href="#">上海</a><a href="#">天津</a><a href="#">重庆</a><a href="#">河北</a><a href="#">山西</a><a href="#">河南</a><a href="#">辽宁</a><a href="#">海外</a><a href="#">吉林</a><a href="#">黑龙江</a><a href="#">宁夏</a><a href="#">山西</a><a href="#">安徽</a><a href="#">江苏</a><a href="#">浙江</a><a href="#">福建</a><a href="#">湖南</a><a href="#">湖北</a><a href="#">广东</a><a href="#">广西</a><a href="#">四川</a><a href="#">海南</a><a href="#">贵州</a><a href="#">云南</a><a href="#">西藏</a><a href="#">陕西</a><a href="#">山西</a><a href="#">甘肃</a><a href="#">青海</a><a href="#">内蒙古</a><a href="#">新疆</a><a href="#">台湾</a><a href="#">香港</a><a href="#">澳门</a><a href="#">钓鱼岛</a>
					</div>
				</div>
				
				<div id="h_right">
					<span id="dl"><a href="#" target="_self">您好，请登录</a></span>
					<div id="menu">
						<ul id="nav">
							<li><a href="#" class="list">免费注册</a></li>
							<li><a href="#">我的订单</a></li>
							<li class="myjd_">
								<a href="#">我的京东</a>
								<div class="public myjd">
									<dl>
										<dt><a href="#">您好，请登录</a></dt>
										<dd><a href="#">优惠券</a><a class="line" href="#">消息</a></dd>
									</dl>
									<ul>
										<li><a href="#">待处理的订单</a></li>
										<li><a href="#">我的关注</a></li>
										<li><a href="#">咨询回复</a></li>
										<li><a href="#">我的京豆</a></li>
										<li><a href="#">降价商品</a></li>
										<li><a href="#">我的理财</a></li>
										<li><a href="#">返修退换货</a></li>
										<li><a href="#">京东白条</a></li>
									</ul>
								</div>
							</li>
							<li><a href="#">京东会员</a></li>
							<li><a href="#">企业采购</a></li>
							<li>
								<a href="#">手机京东</a>
								<div class="public phonejd">
									<dl>
										<dt><a href="#">京东客户端</a></dt>
										<dd>新人专享188元大礼包</dd>
									</dl>
									<dl class="ts">
										<dt><a href="#">京东钱包客户端</a></dt>
										<dd>扫一扫封顶立减999</dd>
									</dl>
								</div>
							</li>
							<li>
								<a href="#">关注京东</a>
								<div class="public noticejd">
									<dl>
										<dt><img src="img/jd.png"></dt>
										<dd>关注京东微店</dd>
									</dl>
								</div>
							</li>
							<li>
								<a href="#">客户服务</a>
								<div class="public clientse">
									<dl>
										<dt>客户</dt>
										<dd><a href="#">帮助中心</a></dd>
										<dd><a href="#">售后服务</a></dd>
										<dd><a href="#">在线客服</a></dd>
										<dd><a href="#">意见建议</a></dd>
										<dd><a href="#">客服邮箱</a></dd>
									</dl>
									<dl>
										<dt>商户</dt>
										<dd class="ts2"><a href="#">京东商学院</a></dd>
									</dl>
								</div>
							</li>
							<li>
								<a href="#">网站导航</a>
								<div class="public netnav">
									<dl class="ts3">
										<dt>特色主题</dt>
										<dd><a href="#">品牌街</a></dd>
										<dd><a href="#">好物100</a></dd>
										<dd><a href="#">京东预售</a></dd>
										<dd><a href="#">尖er货</a></dd>
										<dd><a href="#">京东首发</a></dd>
										<dd><a href="#">今日团购</a></dd>
										<dd><a href="#">优惠券</a></dd>
										<dd><a href="#">闪购</a></dd>
										<dd><a href="#">京东会员</a></dd>
										<dd><a href="#">天天低价</a></dd>
										<dd><a href="#">定期送</a></dd>
										<dd><a href="#">装机大师</a></dd>
										<dd><a href="#">新奇特</a></dd>
										<dd><a href="#">京东试用</a></dd>
										<dd><a href="#">礼品购</a></dd>
										<dd><a href="#">智能馆</a></dd>
										<dd><a href="#">玩bigger</a></dd>
										<dd><a href="#">大牌免息</a></dd>
										<dd><a href="#">北京老字号</a></dd>
									</dl>
									<dl>
										<dt>行业频道</dt>
										<dd><a href="#">服装城</a></dd>
										<dd><a href="#">家用电器</a></dd>
										<dd><a href="#">电脑办公</a></dd>
										<dd><a href="#">手机</a></dd>
										<dd><a href="#">美妆馆</a></dd>
										<dd><a href="#">食品</a></dd>
										<dd><a href="#">数码</a></dd>
										<dd><a href="#">母婴</a></dd>
										<dd><a href="#">家装城</a></dd>
										<dd><a href="#">运动户外</a></dd>
										<dd><a href="#">整车</a></dd>
										<dd><a href="#">图书</a></dd>
										<dd><a href="#">农资频道</a></dd>
										<dd><a href="#">京东智能</a></dd>
									</dl>
									<dl>
										<dt>生活服务</dt>
										<dd><a href="#">京东众筹</a></dd>
										<dd><a href="#">白条</a></dd>
										<dd><a href="#">京东钱包</a></dd>
										<dd><a href="#">京东小金库</a></dd>
										<dd><a href="#">理财</a></dd>
										<dd><a href="#">话费</a></dd>
										<dd><a href="#">旅行</a></dd>
										<dd><a href="#">彩票</a></dd>
										<dd><a href="#">游戏</a></dd>
										<dd><a href="#">机票酒店</a></dd>
										<dd><a href="#">电影票</a></dd>
										<dd><a href="#">水电煤</a></dd>
										<dd><a href="#">京东到家</a></dd>
										<dd><a href="#">京东微联</a></dd>
										<dd><a href="#">京东众测</a></dd>
									</dl>
									<dl class="ts4">
										<dt>更多精选</dt>
										<dd><a href="#">京东社区</a></dd>
										<dd><a href="#">京东通讯</a></dd>
										<dd><a href="#">在线读书</a></dd>
										<dd><a href="#">京东E卡</a></dd>
										<dd><a href="#">智能社区</a></dd>
										<dd><a href="#">游戏社区</a></dd>
										<dd><a href="#">京友邦</a></dd>
										<dd><a href="#">卖家入驻</a></dd>
										<dd><a href="#">企业采购</a></dd>
										<dd><a href="#">服务市场</a></dd>
										<dd><a href="#">乡村招募</a></dd>
										<dd><a href="#">校园加盟</a></dd>
										<dd><a href="#">办公生活馆</a></dd>
										<dd class="ts5"><a href="#">知识产权维护</a></dd>
										<dd class="ts5"><a href="#">English Site</a></dd>
									</dl>
								</div>
							</li>
						</ul>
					</div>	
					
				</div>
				
			</div>
		</div>
	</body>
</html>